<template>
  <div class="silk-road-hot">
    <div class="nav-box">
       <el-select 
        v-model="countrySelected" 
        filterable 
        placeholder="请选择"
        size="small"
        >
          <el-option
            v-for="item in optionsCountry"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      <div class="field-box">
        <span>领域：</span>
        <ul>
            <li 
              v-for="(item,index) in filedArr" 
              :key="item.key"
              :class="filedNum === index?'active':''"
              @click="fieldHandleClick(index)"
            >
              {{item.value}}
            </li>
        </ul>
      </div>
    </div>

    <div class="new-list--right">
      <SilkRoadHotData :silkRoadCountry="countrySelected"/>
    </div>
  </div>
</template>
<script>
import SilkRoadHotData from "@/components/SilkRoadHot/SilkRoadHotData.vue";

export default {
  name:'silkRoadHot',
  components : {
    SilkRoadHotData
  },
  data(){
    return {
      optionsCountry:[{
        value:'1',
        label:'中国'
        },{
        value:'2',
        label:'美国'
        },{
        value:'3',
        label:'法国'
        },{
        value:'4',
        label:'俄罗斯'
        },
      ],
      countrySelected:'1',
      filedArr:[
        {key:'1',value:'全部'},
        {key:'2',value:'政治'},
        {key:'3',value:'经济'},
        {key:'4',value:'社会'},
        {key:'5',value:'能源'},
        {key:'6',value:'文化'},
      ],
      filedNum:0
    }
  },
  methods : {
    fieldHandleClick(num){
      this.filedNum = num
    }
  }
}
</script>
<style lang="scss" scoped>
  .nav-box {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .field-box {
      display: flex;
      margin-left: 2rem;
      ul {
        margin-left: .5rem;
         display: flex;
        li {
          padding: .1rem .5rem;
          border-radius: 31%;
          cursor: pointer;
         
        }
         .active {
            color: $activeColor;
            background: $activeBackgroundColor;
          }
      }
    }
  }
  .new-list--right {
    position: absolute;
    right: 4rem;
  }
</style>

<style lang="scss" >
  .el-select {
    input {
      background: $formColor;
      color: $titleColor;
    }
  }
  .el-scrollbar__view.el-select-dropdown__list {
     background: $formColor;
  }
</style>
